<!DOCTYPE html>
<html ng-app="ionicApp">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</title>

    <link href="../../dist/css/ionic.min.css" rel="stylesheet">
    <script src="../../dist/js/ionic.bundle.min.js"></script>
  </head>

  <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Ionic Scroll Top Test</h1>
      <button class="button"
          ng-click="scrollTop()">
            ScrollTop
          </button>
      </div>
    </ion-header-bar>

    <ion-content delegate-handle="my-handle">

      <ion-list show-delete="data.showDelete" show-reorder="data.showReorder" can-swipe="true">
  		<div class="item item-divider">
  		Scroll Down
  		</div>
        <ion-item ng-repeat="item in items"
                  ng-click="alert(item.id)"
                  type="item-avatar">
          <img src="{{item.image}}">
          <h2>Item {{ item.id }}</h2>
          <p>{{item.id}}</p>
          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
        </ion-item>

      </ion-list>
      <!--
        Search bar
      -->
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <i class="icon ion-ios7-search placeholder-icon"></i>
          <input id="searchKey" type="search" ng-model="query" ng-focus="focused()" placeholder="search" ng-model="searchKey" autocorrect="off" >
          <button class="button button-clear icon ion-close-circled placeholder-icon smallicon" ng-click="clearSearch()"></button>
          <!--i class="icon ion-close-circled placeholder-icon" ng-click="clearSearch()"></i-->
        </label>
      </div>

    </ion-content>

    <script>
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $ionicScrollDelegate, $timeout) {

  $scope.scrollTop = function(){
    $ionicScrollDelegate.$getByHandle('my-handle').scrollTop();
  };
  $scope.focused = function(){
    $timeout($scope.scrollTop, 2000);
  };


  $scope.items = [];
  for (var i=0; i<15; i++) {
    $scope.items.push({id:i});
  }

});
    </script>
  </body>
</html>
